<template>
  <view class="query-box">
    <tm-sheet style="border-radius: 2px">
      <tm-text :font-size="24" _class="text-weight-b" label="请输入你要查询的汉字"></tm-text>
      <tm-divider></tm-divider>

      <tm-input :searchWidth="120" @search="search" prefix="tmicon-search"
                searchLabel="搜索"></tm-input>
    </tm-sheet>

    <tm-sheet style="border-radius: 2px">
      <tm-text :font-size="24" _class="text-weight-b" label="详细信息"></tm-text>
      <tm-divider></tm-divider>

      <tm-descriptions :label-width="100" :width="686" :column="1" transprent :round="1" text title="">
        <tm-descriptions-item :font-size="24" color="red" label="文字" :value="content"/>
        <tm-descriptions-item :font-size="24" color="red" label="读音" :value="pinyin"/>
      </tm-descriptions>
    </tm-sheet>
  </view>
  <view>

  </view>
</template>

<script>
import {pinyinQuery} from "@/api/roll";

export default {
  data() {
    return {
      content: '',
      pinyin: ''
    }
  },
  methods: {
    search(e) {
      pinyinQuery({text: e}).then(res => {
        this.pinyin = res.data
      }).finally(() => {
        this.content = e
      })
    }
  }
}
</script>

<style scoped>

</style>
<style lang="scss">
page {
  background-color: #F7F7F7 !important;
}
</style>
